<template>
  <splitpanes
    @resize="resize"
    class="default-theme"
    :style="{ height: split.height + 'px' }"
    :horizontal="true"
    :first-splitter="false"
  >
    <pane :min-size="split.minHeight" :size="split.percentage">
      <vxe-grid
        v-bind="grid"
        ref="xGrid"
        @cell-dblclick="showDetail"
        :height="split.tableHeight - 4 + 'px'"
      >
        <template #toolbar_buttons>
          <a-space>
            <a-button type="link" @click="detailClick">
              <a-icon type="eye" />查看
            </a-button>
            <a-button type="link"> <a-icon type="delete" />删除 </a-button>
          </a-space>
        </template>
        <template #toolbar_tools> </template>
        <template #loading>
          <a-spin></a-spin>
        </template>
        <template #empty>
          <eip-empty />
        </template>
        <template #checkboxHeader="{ checked, indeterminate }">
          <span @click.stop="$refs.xGrid.toggleAllCheckboxRow()">
            <a-checkbox :indeterminate="indeterminate" :checked="checked">
            </a-checkbox>
          </span>
        </template>
        <template #checkbox="{ row, checked, indeterminate }">
          <span @click.stop="$refs.xGrid.toggleCheckboxRow(row)">
            <a-checkbox :indeterminate="indeterminate" :checked="checked">
            </a-checkbox>
          </span>
        </template>
      </vxe-grid>
    </pane>
    <pane :min-size="20" :size="100 - split.percentage">
      <a-card class="eip-admin-card-small">
        <div
          id="system-loginlog-list-analysis"
          :style="{ height: split.analysisHeight + 'px' }"
        ></div>
      </a-card>
    </pane>
    <login-detail
      v-if="detail.visible"
      :visible.sync="detail.visible"
      :data="detail.data"
    ></login-detail>
  </splitpanes>
</template>

<script>
import { query, analysis } from "@/services/system/log/login";
import loginDetail from "./login-detail";
import Vue from "vue";
import { selectTableRow, deleteConfirm } from "@/utils/util";
import { Splitpanes, Pane } from "splitpanes";
import "splitpanes/dist/splitpanes.css";
export default {
  data() {
    return {
      split: {
        height: this.eipTableHeight() - 10,
        minHeight: 0,
        percentage: 50,
        tableHeight: 0,
        analysisHeight: 100,
      },

      grid: {
        id: "loginlog",
        loading: true,
        height: this.eipTableHeight(),
        sortConfig: {
          trigger: "cell",
          defaultSort: { field: "createTime", order: "desc" },
          orders: ["desc", "asc", null],
          remote: true,
          multiple: true,
          chronological: true,
        },
        pagerConfig: {},
        printConfig: {},
        exportConfig: {},
        filterConfig: {
          remote: true,
        },
        toolbarConfig: {
          slots: {
            buttons: "toolbar_buttons",
            tools: "toolbar_tools",
          },
        },
        columns: [
          {
            type: "checkbox",
            width: 50,
            slots: {
              checkbox: "checkbox",
              header: "checkboxHeader",
            },
            fixed: "left",
            align: "center",
          },
          { type: "seq", width: 60, fixed: "left" },
          {
            field: "createTime",
            title: "登录时间",
            width: 150,
            sortable: true,
            showOverflow: true,
            filterRender: { name: "MLFilterRender" },
            filters: [
              {
                data: {
                  type: "datetime",
                  op: "cn",
                  write: null,
                  min: null,
                  max: null,
                },
              },
            ],
          },

          {
            field: "createUserCode",
            title: "登录名",
            width: 150,
            sortable: true,
            filterRender: {
              name: "MLFilterRender",
            },
            filters: [
              {
                data: {
                  type: "input",
                  key: null,
                  op: "cn",
                  write: null,
                  options: [],
                },
              },
            ],
          },
          {
            field: "createUserName",
            title: "名称",
            width: 150,
            sortable: true,
            filterRender: {
              name: "MLFilterRender",
            },
            filters: [
              {
                data: {
                  type: "input",
                  key: null,
                  op: "cn",
                  write: null,
                  options: [],
                },
              },
            ],
          },
          {
            field: "loginOutTime",
            title: "退出时间",
            width: 150,
            sortable: true,
            showOverflow: true,
            filterRender: { name: "MLFilterRender" },
            filters: [
              {
                data: {
                  type: "datetime",
                  op: "cn",
                  write: null,
                  min: null,
                  max: null,
                },
              },
            ],
          },
          {
            field: "standingTime",
            title: "停留时间(分钟)",
            width: 180,
            sortable: true,
            filterRender: { name: "MLFilterRender" },
            filters: [
              {
                data: {
                  type: "number",
                  op: "cn",
                  write: null,
                  min: null,
                  max: null,
                },
              },
            ],
          },
          {
            field: "remoteIp",
            title: "客户端IP",
            width: 150,
            sortable: true,
            filterRender: {
              name: "MLFilterRender",
            },
            filters: [
              {
                data: {
                  type: "input",
                  key: null,
                  op: "cn",
                  write: null,
                  options: [],
                },
              },
            ],
          },
          {
            field: "remoteIpAddress",
            title: "归属地址",
            width: 150,
            sortable: true,
            filterRender: {
              name: "MLFilterRender",
            },
            filters: [
              {
                data: {
                  type: "input",
                  key: null,
                  op: "cn",
                  write: null,
                  options: [],
                },
              },
            ],
          },
          {
            field: "userAgent",
            title: "浏览器代理",
            width: 160,
            sortable: true,
            filterRender: {
              name: "MLFilterRender",
            },
            filters: [
              {
                data: {
                  type: "input",
                  key: null,
                  op: "cn",
                  write: null,
                  options: [],
                },
              },
            ],
          },
          {
            field: "osInfo",
            title: "操作系统",
            width: 150,
            sortable: true,
            filterRender: {
              name: "MLFilterRender",
            },
            filters: [
              {
                data: {
                  type: "input",
                  key: null,
                  op: "cn",
                  write: null,
                  options: [],
                },
              },
            ],
          },
          {
            field: "browser",
            title: "浏览器",
            width: 150,
            sortable: true,
            filterRender: {
              name: "MLFilterRender",
            },
            filters: [
              {
                data: {
                  type: "input",
                  key: null,
                  op: "cn",
                  write: null,
                  options: [],
                },
              },
            ],
          },
        ],

        proxyConfig: {
          seq: true, // 启用动态序号代理，每一页的序号会根据当前页数变化
          sort: true, // 启用排序代理，当点击排序时会自动触发 query 行为
          filter: true, // 启用筛选代理，当点击筛选时会自动触发 query 行为
          props: {
            result: "data", // 配置响应结果列表字段
            total: "total", // 配置响应结果总页数字段
          },
          ajax: {
            query: ({ page, sorts, filters }) => {
              return new Promise((resolve) => {
                const firstSort = sorts[0];
                query({
                  filters: this.eipTableFilter(filters),
                  current: page.currentPage,
                  size: page.pageSize,
                  sort: this.eipGridSort(sorts),
                }).then((result) => {
                  if (result.code == this.eipResultCode.success) {
                    resolve(result);
                  }

                  this.grid.loading = false;
                });
              });
            },
          },
        },
      },
      detail: {
        data: {},
        visible: false,
      },

      analysis: {
        echarts: {},
        option: {
          tooltip: {
            trigger: "axis",
          },
          legend: {
            data: ["登录次数"],
          },
          grid: {
            x: 50,
            y: 30,
            x2: 50,
            y2: 64,
          },
          toolbox: {
            show: true,
            feature: {
              mark: { show: true },
              dataView: { show: true, readOnly: false },
              magicType: { show: true, type: ["line", "bar"] },
              restore: { show: true },
              saveAsImage: { show: true },
            },
          },
          dataZoom: [
            {
              type: "slider",
              show: true,
              xAxisIndex: [0],
              start: 0,
              end: 9999, //初始化滚动条
            },
          ],
          xAxis: {
            type: "category",
            boundaryGap: false,
            data: [],
          },
          yAxis: {
            type: "value",
          },
          series: {
            data: [],
            name: "登录次数",
            type: "line",
            areaStyle: {},
          },
        },
      },
    };
  },
  components: {
    loginDetail,
    Splitpanes,
    Pane,
  },
  created() {
    this.initHeight();
    this.$nextTick(() => {
      this.analysisInit();
    });
  },

  methods: {
    /**
     *
     * @param {*} event
     */
    resize(event) {
      this.split.percentage = event[0].size;
      this.initHeight();
      this.analysis.echarts.resize();
    },
    /**
     * 初始化高度
     */
    initHeight() {
      this.split.minHeight = (350 / this.split.height) * 100;
      this.split.tableHeight =
        this.split.height * (this.split.percentage / 100);
      this.split.analysisHeight = this.split.height - this.split.tableHeight;
    },
    //登录日志
    analysisInit() {
      let that = this;

      if (!this.$echarts) {
        Vue.prototype.$echarts = window.echarts;
      }

      this.analysis.echarts = this.$echarts.init(
        document.getElementById("system-loginlog-list-analysis")
      );
      analysis({}).then(function (result) {
        that.analysis.option.xAxis.data = result.analysis.xdata;
        that.analysis.option.series.data = result.analysis.ydata;
        that.analysis.echarts.setOption(that.analysis.option);
      });
    },

    //初始化列表数据
    tableInit() {
      this.$refs.xGrid.commitProxy("query");
    },

    //详情
    showDetail({
      row,
      rowIndex,
      $rowIndex,
      column,
      columnIndex,
      $columnIndex,
      $event,
    }) {
      this.detail.data = row;
      this.detail.visible = true;
    },

    /**
     * 修改
     */
    detailClick() {
      let that = this;
      selectTableRow(
        that.$refs.xGrid,
        function (row) {
          that.detail.data = row;
          that.detail.visible = true;
        },
        that
      );
    },
  },
};
</script>
